<script setup lang="ts">
import { useStore } from 'vuex';
import {showDialog} from '@/hooks/useDialog'
import useToast from '@/hooks/useToast'
import { useRouter } from 'vue-router'
import { httpPending,httpCache } from '@/api/http'
import { ref } from 'vue'
const $store=useStore(),$router=useRouter(),fontSize=ref(getHtmlFontSize())
//退出登录
const logout=() =>{
  showDialog({
    content:'是否退出登录?',
    comfirm(){
      _hmt.push(['logout','logout','click','username',$store.getters['user/getUser']('username')])
      $store.commit('user/clear')
      $router.back()
    }
  })
}
//清除数据缓存
const clearCache=() =>{
  showDialog({
    content:'是否清除页面缓存?',
    comfirm(){
      $store.commit('pages/clearCache')
      $store.commit('user/clear')
      httpPending.clear()
      httpCache.clear()
      sessionStorage.removeItem(import.meta.env.VITE_VUEX_KEY)
      localStorage.removeItem(import.meta.env.VITE_VUEX_KEY)
      useToast('清除成功')
      location.reload()
    }
  })
}
function setHtmlFontSize(){
  document.documentElement.style.fontSize=fontSize.value+'px'
}
function getHtmlFontSize(){
  return parseInt(document.documentElement.style.fontSize)
}
//减少字体大小
const decreaseFont=() =>{
  fontSize.value--
  setHtmlFontSize()
}
//增加字体大小
const plusFont=() =>{
  fontSize.value++
  setHtmlFontSize()
}
</script>

<template>
  <div
    w:bg="blue-gray-100"
    w:p="b-8"
    w:font="bold"
    w:text="3xl"
  >
    <div
      w:flex="~ nowrap"
      w:align="items-center"
      w:bg="white"
      w:p="8"
      w:border="b-2 solid gray-200"
    >
      <div class="iconfont icon-my"
        w:text="8xl"
        w:flex="none"
        w:m="r-8"
      ></div>
      <div>
        <div></div>
        <div>用户名:{{$store.getters['user/getUser']('username')}}</div>
      </div>
    </div>
    <div
      w:flex="~ nowrap"
      w:align="items-center"
      w:justify="between"
      w:p="8"
      w:bg="white"
      w:m="b-8"
    >
      <div>收货地址管理</div>
      <router-link to="/settings/address">
        <div
          w:text="gray-400"
          w:font="light"
          w:flex="~ nowrap"
        >
          <div>管理我的地址</div>
          <div class="iconfont icon-arrow-right"></div>
        </div>
      </router-link>
    </div>
    <div
      w:flex="~ nowrap"
      w:align="items-center"
      w:justify="between"
      w:p="8"
      w:bg="white"
      w:m="b-8"
    >
      <div>设置字体大小</div>
      <div
        w:flex="~ nowrap"
        w:align="items-center"
      >
        <div class="iconfont icon-decrease" @click="decreaseFont"></div>
        <input type="number" max="30" min="0" :value="fontSize" disabled
          w:outline="none"
          w:m="x-4"
          w:h="full"
          w:w="10"
          w:bg="transparent"
          w:text="center"
        />
        <div class="iconfont icon-plus" @click="plusFont"></div>
      </div>
    </div>
    <div @click="clearCache"
      w:flex="~ nowrap"
      w:align="items-center"
      w:justify="between"
      w:p="8"
      w:bg="white"
      w:m="b-8"
    >
      <div>清除缓存</div>
    </div>
    <div @click="logout"
      w:flex="~ nowrap"
      w:align="items-center"
      w:justify="between"
      w:p="8"
      w:bg="white"
      w:m="b-8"
    >
      <div>退出登录</div>
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>

<route>
{
  meta: {
    title: '设置',
    auth: true,
    cache: true
  }
}
</route>